<script setup lang="ts">
import {onMounted, onUnmounted, ref, watch} from "vue";
import rt1 from '@/assets/img/rt/2.png'
import rt2 from '@/assets/img/rt/3.png'
import rt3 from '@/assets/img/rt/4.png'
import rt4 from '@/assets/img/rt/5.png'
import rt5 from '@/assets/img/rt/6.png'
import rt6 from '@/assets/img/rt/7.png'
import rt7 from '@/assets/img/rt/8.png'
import rt8 from '@/assets/img/rt/9.png'
import rt9 from '@/assets/img/rt/10.png'
import rt10 from '@/assets/img/rt/11.png'
import rt11 from '@/assets/img/rt/12.png'
import rt12 from '@/assets/img/rt/13.png'
import rt13 from '@/assets/img/rt/14.png'
import rt14 from '@/assets/img/rt/15.png'
import rt15 from '@/assets/img/rt/16.png'
import rt16 from '@/assets/img/rt/17.png'

const lazyImportModules = import.meta.glob('@/assets/img/rt/bz/*.png',{eager:true});
const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  }
})


const pos = ref([
  [-3, 50],
    [0,66],
    [12,82],
    [31,93],
    [52,96],
    [74,93],
    [93,82],
    [105,66],
  [107, 50],
  [105,34],
  [93,18],
  [74,7],
  [52,4],
  [31,7],
  [12,18],
  [0,34],
])

const imgs = [
    [lazyImportModules['/src/assets/img/rt/bz/0-0.png']?.default],
    [rt2],
    [rt3],
    [rt4],
    [rt5],
    [rt6],
    [rt7],
    [rt8],
    [rt9],
    [rt16],
    [rt10],
    [rt11],
    [rt12],
    [rt13],
    [rt14],
    [rt15],
]

const imgData = ref([])

const am = () => {
  let pos0 = pos.value[0]
  for (let i = 0; i < pos.value.length; i++){
    if(i == pos.value.length - 1){
      pos.value[i] = pos0
    }else{
      pos.value[i] = pos.value[i + 1]
    }
  }

  // requestAnimationFrame(am)
}
const timer = ref()


watch(()=>props.data,(val:any)=>{
  imgData.value = val?.risk_estimate?.lookups?.map((v:any)=>v?.score || 0)
},{
  deep:true,
  immediate:true
})

onMounted(()=>{
  if(timer.value) clearInterval(timer.value)
  timer.value = setInterval(()=>{
    am()
  },2000)
})

onUnmounted(()=>{
  if(timer.value) clearInterval(timer.value)
})

</script>

<template>
<div class="relative overflow-visible w-[90%] left-[5%] h-[100%]">
  <div class="absolute top-[-20px] w-[100%] h-[150px] bg1 z-[2]"></div>
  <div class="flex justify-between w-[111%] text-[#fff] text-[16px] absolute top-[16px] left-[-40px] z-[3]">
    <div>
      <div class="wfx w-[68px] h-[26px] flex justify-center items-center">无风险</div>
      <div class="qfx w-[68px] h-[26px] flex justify-center items-center mt-[10px]">轻风险</div>
    </div>
    <div>
      <div class="zfx w-[68px] h-[26px] flex justify-center items-center">中风险</div>
      <div class="gfx w-[68px] h-[26px] flex justify-center items-center mt-[10px]">高风险</div>
    </div>
  </div>
  <div class="img" v-for="(_,i) in 16" :key="i" :style="{
    top:`${ pos[i][0]}%`,
    left:`${ pos[i][1]}%`
  }">
    <img :src="lazyImportModules[`/src/assets/img/rt/bz/${i}-${imgData?.[i]}.png`]?.default" alt="">
  </div>
  <div class="absolute bottom-[-20px] w-[100%] h-[150px] bg2 z-[2]"></div>
</div>
</template>

<style scoped lang="scss">
.img{
  position: absolute;
  z-index: 1;
  width: 106px;
  height: 119px;
  transform: translate(-50%);
  transition: all 2s linear;
}

.bg1{
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.bg2{
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.wfx{
  background: url("@/assets/img/rt/21.png") 0 0 / 100% 100% no-repeat;
}

.qfx{
  background: url("@/assets/img/rt/22.png") 0 0 / 100% 100% no-repeat;
}
.zfx{
  background: url("@/assets/img/rt/23.png") 0 0 / 100% 100% no-repeat;
}
.gfx{
  background: url("@/assets/img/rt/24.png") 0 0 / 100% 100% no-repeat;
}
</style>
